<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网约车系统</title>
    <link rel="stylesheet" href="styles.css">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=cfb696b617f4818354ed06fab9ae5d06&plugin=AMap.Driving,AMap.Geocoder,AMap.AutoComplete"></script>
    <script type="text/javascript" src="https://webapi.amap.com/ui/1.1/main.js"></script>
</head>

<body>
<!-- 登录页面 -->
<div id="login-page" class="page">
    <h1>网约车系统 - 登录</h1>
    <label for="username">用户名：</label>
    <input type="text" id="username"><br>
    <label for="password">密码：</label>
    <input type="password" id="password"><br>
    <label for="user-type">登录身份选择：</label>
    <select id="user-type">
        <option value="user">用户</option>
        <option value="admin">管理员</option>
    </select><br>
    <button onclick="login()">登录</button>
    <button onclick="showPage('register-page')">注册</button>
    <div id="login-result"></div>
</div>

<!-- 注册页面 -->
<div id="register-page" class="page" style="display: none;">
    <h1>网约车系统 - 注册</h1>
    <label for="reg-username">用户名：</label>
    <input type="text" id="reg-username"><br>
    <label for="reg-password">密码：</label>
    <input type="password" id="reg-password"><br>
    <input type="hidden" id="reg-user-type" value="user">
    <button onclick="register()">注册</button>
    <button onclick="showPage('login-page')">返回登录</button>
    <div id="register-result"></div>
</div>

<!-- 用户页面 -->
<div id="user-page" class="page" style="display: none;">
    <h1>网约车系统 - 用户页面</h1>
    <button onclick="showPage('passenger-order')">乘客下单</button>
    <button onclick="showPage('driver-join')">司机加盟申请</button>
    <button onclick="showPage('search-order')">搜索订单</button>
    <button onclick="viewHistoryOrders(); showPage('history-orders')">查看历史订单</button>
    <button onclick="showPage('login-page')">返回至登录页面</button>
</div>

<!-- 用户历史订单页面 -->
<div id="history-orders" class="page" style="display: none;">
    <h2>我的历史订单</h2>
    <div id="history-orders-result"></div>
    <div id="user-stats" style="margin-top: 20px; padding: 15px; background-color: #f0f7ff; border-radius: 5px;">
        <h3>消费统计</h3>
        <p>总消费金额: <span id="total-user-cost">0</span> 元</p>
        <p>总乘车次数: <span id="total-user-rides">0</span> 次</p>
        <p>总乘车距离: <span id="total-user-distance">0</span> 公里</p>
    </div>
    <button onclick="showPage('user-page')">返回用户页面</button>
</div>

<!-- 管理员页面 -->
<div id="admin-page" class="page" style="display: none;">
    <h1>网约车系统 - 管理员页面</h1>
    <button onclick="showPage('search-order')">搜索订单</button>
    <button onclick="viewAllDrivers(); showPage('view-drivers')">查看公司所有司机</button>
    <button onclick="viewAllOrders(); showPage('all-history-orders')">查看所有历史订单</button>
    <button onclick="viewAllVehicles(); showPage('view-vehicles')">查询公司旗下车辆信息</button>
    <button onclick="showPage('add-autonomous-vehicle')">新增自动驾驶车辆</button>
    <button onclick="showPage('add-company-vehicle')">新增公司车辆</button>
    <button onclick="showPage('login-page')">返回至登录页面</button>
</div>

<!-- 管理员查看所有历史订单页面 -->
<div id="all-history-orders" class="page" style="display: none;">
    <h2>所有历史订单</h2>
    <div id="all-history-orders-result"></div>
    <div id="company-stats" style="margin-top: 20px; padding: 15px; background-color: #f0f7ff; border-radius: 5px;">
        <h3>公司收益统计</h3>
        <p>公司总收入: <span id="total-company-revenue">0</span> 元</p>
        <p>司机总佣金: <span id="total-driver-commission">0</span> 元</p>
        <p>总订单数量: <span id="total-order-count">0</span> 单</p>
        <p>总运营距离: <span id="total-distance">0</span> 公里</p>
    </div>
    <button onclick="showPage('admin-page')">返回管理员页面</button>
</div>

<!-- 乘客下单页面 -->
<div id="passenger-order" class="page" style="display: none;">
    <h2>乘客下单</h2>
    <div id="map-container" style="width: 90%; height: 600px; margin-bottom: 20px;"></div>
    <div class="form-group">
        <div>
            <label for="start-address">起点位置：</label>
            <input type="text" id="start-address" placeholder="经度,纬度" readonly>
            <input type="hidden" id="start-lat">
            <input type="hidden" id="start-lng">
        </div>
        <div>
            <label for="end-address">终点位置：</label>
            <input type="text" id="end-address" placeholder="经度,纬度" readonly>
            <input type="hidden" id="end-lat">
            <input type="hidden" id="end-lng">
        </div>
    </div>
    <div class="route-info" id="route-info" style="display: none; margin-bottom: 15px; padding: 10px; background: #f0f9ff; border-radius: 4px;">
        <p>路线距离：<span id="route-distance">0</span> 公里</p>
        <p>预计用时：<span id="route-duration">0</span> 分钟</p>
        <p>预估费用：<span id="route-fare">0</span> 元</p>
    </div>
    <div class="form-group">
        <div>
            <label for="order-type">车型选择：</label>
            <select id="order-type" onchange="updateRouteFare()">
                <option value="1">经济型</option>
                <option value="2">专车</option>
                <option value="3">自动驾驶</option>
            </select>
        </div>
        <div>
            <button onclick="calculateRoute()" style="margin-right: 10px;">规划路线</button>
            <button onclick="createOrder()">确认下单</button>
        </div>
    </div>
    <div id="order-result"></div>
    <button onclick="showPage('user-page')">返回用户页面</button>
</div>

<!-- 司机加盟申请页面 -->
<div id="driver-join" class="page" style="display: none;">
    <h2>司机加盟申请</h2>
    <label for="join-type">加盟方式：</label>
    <select id="join-type" onchange="updateJoinForm()">
        <option value="DRIVER_VEHICLE">司机自带车辆加盟</option>
        <option value="COMPANY_VEHICLE">公司提供车辆</option>
        <option value="AUTONOMOUS_VEHICLE">自动驾驶类车辆</option>
    </select><br>
    <label for="driver-name">司机姓名：</label>
    <input type="text" id="driver-name"><br>
    <label for="license-number">驾驶证编号：</label>
    <input type="text" id="license-number"><br>
    <div id="vehicle-info-section">
        <label for="vehicle-license-plate">车辆牌照：</label>
        <input type="text" id="vehicle-license-plate"><br>
        <label for="model">车辆型号：</label>
        <input type="text" id="model"><br>
        <label for="type">车辆运营类型：</label>
        <select id="type">
            <option value="ECONOMY">经济型</option>
            <option value="LUXURY">专车</option>
        </select><br>
        <label for="seats">座位数：</label>
        <input type="number" id="seats" value="4"><br>
        <label for="can-carpool">是否可以拼车：</label>
        <input type="checkbox" id="can-carpool"><br>
    </div>
    <button onclick="applyForJoining()">申请</button>
    <div id="join-result"></div>
    <button onclick="showPage('user-page')">返回用户页面</button>
</div>

<!-- 搜索订单页面 -->
<div id="search-order" class="page" style="display: none;">
    <h2>搜索订单</h2>
    <label for="order-id">订单编号：</label>
    <input type="text" id="order-id"><br>
    <button onclick="viewOrderStatus()">查询</button>
    <div id="order-status-result"></div>
    <button onclick="goBackToMainPage()">返回主页面</button>
    <button onclick="showPage('login-page')">返回登录页面</button>
</div>

<!-- 查看公司所有司机页面 -->
<div id="view-drivers" class="page" style="display: none;">
    <h2>查看公司所有司机</h2>
    <div id="driver-list"></div>
    <button onclick="showPage('admin-page')">返回管理员页面</button>
</div>

<!-- 新增自动驾驶车辆页面 -->
<div id="add-autonomous-vehicle" class="page" style="display: none;">
    <h2>新增自动驾驶车辆</h2>
    <label for="autonomous-license-plate">车辆牌照：</label>
    <input type="text" id="autonomous-license-plate"><br>
    <label for="autonomous-model">车辆型号：</label>
    <input type="text" id="autonomous-model"><br>
<!--    <label for="autonomous-type">车辆运营类型：</label>-->
<!--    <select id="autonomous-type">-->
<!--        <option value="ECONOMY">经济型</option>-->
<!--        <option value="LUXURY">专车</option>-->
<!--    </select><br>-->
    <label for="autonomous-seats">座位数：</label>
    <input type="number" id="autonomous-seats"><br>
    <label for="autonomous-can-carpool">是否可以拼车：</label>
    <input type="checkbox" id="autonomous-can-carpool"><br>
    <button onclick="addAutonomousVehicle()">添加</button>
    <div id="add-autonomous-result"></div>
    <button onclick="showPage('admin-page')">返回管理员页面</button>
</div>

<!-- 新增公司车辆页面 -->
<div id="add-company-vehicle" class="page" style="display: none;">
    <h2>新增公司车辆</h2>
    <label for="company-license-plate">车辆牌照：</label>
    <input type="text" id="company-license-plate"><br>
    <label for="company-model">车辆型号：</label>
    <input type="text" id="company-model"><br>
    <label for="company-type">车辆运营类型：</label>
    <select id="company-type">
        <option value="ECONOMY">经济型</option>
        <option value="LUXURY">专车</option>
    </select><br>
    <label for="company-seats">座位数：</label>
    <input type="number" id="company-seats" value="4"><br>
    <label for="company-can-carpool">是否可以拼车：</label>
    <input type="checkbox" id="company-can-carpool"><br>
    <button onclick="addCompanyVehicle()">添加</button>
    <div id="add-company-result"></div>
    <button onclick="showPage('admin-page')">返回管理员页面</button>
</div>

<!-- 查看公司旗下车辆信息页面 -->
<div id="view-vehicles" class="page" style="display: none;">
    <h2>公司旗下车辆信息</h2>
    <div>
        <button onclick="viewAllVehicles()">查看所有车辆</button>
        <button onclick="viewCompanyVehicles()">查看公司车辆</button>
        <button onclick="viewVehiclesByStatus('AVAILABLE')">查看可用车辆</button>
        <button onclick="viewVehiclesByStatus('ON_TRIP')">查看在途车辆</button>
        <button onclick="viewVehiclesByStatus('UNASSIGNED')">查看未分配车辆</button>
    </div>
    <div id="vehicles-list"></div>
    <div id="vehicle-stats" style="margin-top: 20px; padding: 15px; background-color: #f0f7ff; border-radius: 5px;">
        <h3>车辆统计</h3>
        <p>车辆总数: <span id="total-vehicles">0</span></p>
        <p>可用车辆数: <span id="available-vehicles">0</span></p>
        <p>在途车辆数: <span id="ontrip-vehicles">0</span></p>
        <p>自动驾驶车辆数: <span id="autonomous-vehicles">0</span></p>
        <p>公司未分配车辆数: <span id="company-vehicles">0</span></p>
    </div>
    <button onclick="showPage('admin-page')">返回管理员页面</button>
</div>

<script src="script.js"></script>
</body>

</html>